<template>
	<div class="home">

		<div class="home-search">

			<van-search @focus="$router.push({name:'Search'})"  placeholder="请输入搜索关键词" shape="round" input-align="center"/>
		</div>

		<div class="home-content">
			<div class="home-swipe">
				<van-swipe autoplay="3000">
					<van-swipe-item v-for="(image, index) in images" :key="index">
						<van-image :src='image' />
					</van-swipe-item>
				</van-swipe>
			</div>

			<!-- <van-grid :column-num="5" :border=false clickable> -->
			<!-- <van-grid-item v-for="value in 15" :key="value" icon="photo-o" text="文字" /> -->
			<div class="home-grid">
				<div class="home-grid-card" @click="displayKind(1)">
					<div><svg class="icon"><use xlink:href="#iconcheese"></use></svg></div><div>饮品甜点</div>
				</div>
				<div class="home-grid-card" @click="displayKind(2)">
					<div><svg class="icon"><use xlink:href="#iconpot"></use></svg></div><div>锅类</div>
				</div>
				<div class="home-grid-card" @click="displayKind(3)">
					<div><svg class="icon"><use xlink:href="#icontoaster"></use></svg></div><div>绝味盖饭</div>
				</div>
				<div class="home-grid-card" @click="displayKind(4)">
					<div><svg class="icon"><use xlink:href="#icondonut"></use></svg></div><div>香辣川菜</div>
				</div>
				
				<div class="home-grid-card" @click="displayKind(5)">
					<div><svg class="icon new"><use xlink:href="#iconcherry"></use></svg></div><div>新鲜时蔬</div>
				</div>
				<div class="home-grid-card" @click="displayKind(6)">
					<div><svg class="icon new"><use xlink:href="#iconramen"></use></svg></div><div>劲道面食</div>
				</div>
				<div class="home-grid-card" @click="displayKind(7)">
					<div><svg class="icon new"><use xlink:href="#iconhoney"></use></svg></div><div>煲汤</div>
				</div>
				<div class="home-grid-card" @click="displayKind(8)">
					<div><svg class="icon new"><use xlink:href="#iconcondiments"></use></svg></div><div>小炒家常</div>
				</div>
				<div class="home-grid-card" @click="displayKind(9)">
					<div><svg class="icon"><use xlink:href="#iconfish"></use></svg></div><div>精品鱼鲜</div>
				</div>
				<div class="home-grid-card" @click="displayKind(10)">
					<div><svg class="icon"><use xlink:href="#iconfrench_press"></use></svg></div><div>特色美食</div>
				</div>
				<div class="home-grid-card" @click="displayKind(11)">
					<div><svg class="icon"><use xlink:href="#iconcupcake"></use></svg></div><div>甜品</div>
				</div>
				<div class="home-grid-card">
					<div><svg class="icon"><use xlink:href="#iconmitten"></use></svg></div><div>全部</div>
				</div>
				
			</div>

			<div class="home-filter">
				<SelfFilter></SelfFilter>
			</div>
		</div>
		<Navtab></Navtab>
	</div>
</template>

<script>
	import Navtab from "@/components/Navtab.vue";
	import SelfFilter from "@/components/SelfFilter";
	export default {
		name: "Home",
		data() {
			return {
				error:false,
				show:false,
				loading:false,
				finished:false,
				images: [],
			}
		},
		created() {
			this.images = ['swipeImg/1.jpg', 'swipeImg/2.jpg', 'swipeImg/3.jpg'];
		},
		methods: {
			displayKind(value) {
				this.$router.push({
					name: 'FoodCategory',
					params:{
						kind:value,
					}
				});
			},

		},
		components: {
			Navtab,
			SelfFilter
		},
	}
</script>

<style lang="less">
	@import "../../main.less";

	.home {
		&:after {
			content: '';
			display: block;
			height: 70px;
		}

		.home-search {
			margin-bottom: 10px;
		}

		.home-content {
			width: 95%;
			margin: 0 auto;
			height: 100%;

			.home-swipe {
				margin-bottom: 10px;

				.van-swipe {
					text-align: center;
					border-radius: 12px;
					height: 190px;

					.van-image {
						height: 100%;
						width: 100%;
					}
				}
			}
			.home-grid {
				margin-bottom: 10px;
				height: 250px;
				border-radius: 10px;
				display: flex;
				flex-wrap: wrap;
				background-color: white;
				.home-grid-card {
					height: 80px;
					width: 80px;
					margin: 2px;
					display: flex;
					flex-direction: column;
					//background-color: lightblue;
					>div{
						&:nth-child(1){
							margin: auto;
							padding-top: 10px;
						}
						&:nth-child(2) {
							margin: auto;
							padding-bottom: 10px;
							font-size: 14px;
							color: #545559;
						}
					}
				}
				.home-grid-card:hover{
					box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
					background-color: rgba(245, 149, 149, 0.1);
				}

			}

			.home-filter {}
		}

		.home-partition {
			margin-bottom: 10px;
		}

		.icon {
			width: 2em;
			height: 2em;
			//vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}
	


		// .van-grid {
		// 	.van-grid-item {
		// 		&:nth-child(n+6) {
		// 			height: 60px;
		// 		}
		// 		&:first-child {
		// 			.van-grid-item__content {
		// 				border-top-left-radius: 10px;
		// 			}
		// 		}

		// 		&:last-child {
		// 			.van-grid-item__content {
		// 				border-bottom-right-radius: 10px;
		// 			}
		// 		}

		// 		&:nth-child(5) {
		// 			.van-grid-item__content {
		// 				border-top-right-radius: 10px;
		// 			}
		// 		}

		// 		&:nth-last-child(5) {
		// 			.van-grid-item__content {
		// 				border-bottom-left-radius: 10px;
		// 			}
		// 		}

		// 	}
		// }
	}
</style>
